<template>
  <div class="flex-1 overflow-hidden flex flex-col w-[290px]">
    <!--患者列表 -->
    <SearchComb v-model:value="searchState" placeholder="卡号/姓名/助记码" @search="search()" />
    <div class="my-2">
      <a-radio-group v-model:value="state" button-style="solid" class="flex radio-style" @change="onChangeActive()">
        <a-radio-button v-for="(item, index) in searchButton" :key="index" :value="item.state">{{ item.title }}({{ item.count || 0 }})</a-radio-button>
      </a-radio-group>
    </div>
    <BaseList :data-source="dataSource" :loading="loading" class="w-full flex-1 overflow-auto">
      <template #renderItem="{ item }">
        <div class="py-3 px-3 !mt-0" :class="selectedItem?.jzbh === item.jzbh ? 'active' : ''" @click="onSelect(item)">
          <div class="flex justify-between items-start">
            <div class="w-3/5">
              <div class="text-base font-bold text-primary truncate mb-2 flex items-center" :title="item.brName">
                <div class="max-w-20 truncate mr-2">{{ item.brName }}</div>
                <a-button v-if="item.czfz === '初诊'" type="primary" shape="circle" size="small">初</a-button>
                <a-button v-if="item.czfz === '复诊'" type="primary" shape="circle" size="small" class="bg-orange-400">复</a-button>
                <a-dropdown placement="bottomLeft">
                  <template #overlay>
                    <a-card class="w-[215px]">
                      <div class="flex mb-2">
                        <LabelValue :width="140" class="mr-2" :value="referralData?.originalEmpName" />
                        <LabelValue :value="referralData?.addtime" />
                      </div>
                      <div>{{ referralData?.memo ? referralData?.memo : '-' }}</div>
                    </a-card>
                  </template>
                  <a-button
                    v-if="item.sfzz === '1'"
                    type="primary"
                    shape="circle"
                    size="small"
                    class="bg-lime-500 ml-1"
                    @mouseenter="handlerReferral(item.jzbh)"
                    >转</a-button
                  >
                </a-dropdown>
              </div>
              <span class="w-14 text-grey mr-2">{{ item.brXb }}</span>
              <span class="text-right text-grey mr-2">{{ item.brAge }}</span>
              <span class="inline-block w-[90px] text-left text-grey truncate align-top">{{ item.matterName }}</span>
            </div>
            <div class="flex items-center justify-end w-2/5 overflow-hidden">
              <div class="text-right">
                <div class="text-base mb-2">{{ item.lsh }}</div>
                <div class="text-grey">{{ item.rysx || '-' }}</div>
              </div>
              <div class="ml-2">
                <a-dropdown placement="bottomLeft" :get-popup-container="(trigger) => trigger.parentNode">
                  <template #overlay>
                    <a-menu class="text-center">
                      <a-menu-item v-for="(action, i) in actionArray" :key="i">
                        <BaseButton size="small" type="link" @click="onClickVisit(item, action.state)">{{ action.title }}</BaseButton>
                      </a-menu-item>
                    </a-menu>
                  </template>
                  <div class="px-2 py-1 hover:bg-slate-200 rounded">
                    <MoreOutlined class="text-base" />
                  </div>
                </a-dropdown>
              </div>
            </div>
          </div>
        </div>
      </template>
    </BaseList>
    <MovePatientModal v-model:open="referralOpen" :row-data="selectedItem" @success="search()" />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { MoreOutlined } from '@ant-design/icons-vue'
import { post } from '@/utils/request'
import BaseList from '@/components/BaseList'
import SearchComb from '@/components/SearchComb'
// import dayjs from 'dayjs'
import LabelValue from '@/components/LabelValue'
import useStore from '../store'
import MovePatientModal from './MovePatientModal.vue'

const store = useStore()
const searchState = ref({})
const loading = ref(false)
const dataSource = ref([])
const selectedItem = ref()
const searchButton = ref([
  { state: 0, title: '候诊中' },
  { state: 3, title: '已完诊' },
  { state: 4, title: '待回诊' }
])
const actionArray = ref([])
const state = ref(0)
const stateArr = ref([0, 1])
const referralOpen = ref(false)
const referralData = ref({})

const onSelect = (item) => {
  selectedItem.value = item
  store.currentPatient = item
}

const search = () => {
  queryList()
  getRegistereCount()
}

const queryList = async (isSelect = true) => {
  loading.value = true
  const {
    code,
    data = [],
    msg
  } = await post('/outp/mzys/getOutpRecordInfoList', {
    pyjm: searchState.value?.searchKey,
    stdate: searchState.value?.startDate,
    eddate: searchState.value?.endDate,
    ghys: searchState.value?.ghys,
    ghzts: stateArr.value,
    type: 1
  })
  loading.value = false
  if (code !== 0) return message.error(msg || '查询失败')
  dataSource.value = [...data]
  if (data.length) {
    if (isSelect) {
      selectedItem.value = data[0]
      store.currentPatient = data[0]
    }
  } else {
    store.currentPatient = {}
  }
}
const getRegistereCount = async () => {
  const res = await post('/outp/outpComprehensive/getOutpRegistereCountList', {
    stdate: searchState.value?.startDate,
    eddate: searchState.value?.endDate,
    ghys: searchState.value?.ghys,
    type: 1
  })
  if (res.code !== 0) return message.error(res.msg)
  searchButton.value[0].count = +res.data.hz
  searchButton.value[1].count = res.data.ywz
  searchButton.value[2].count = res.data.dhz
}

const onChangeActive = () => {
  stateArr.value = state.value === 0 ? [state.value, 1] : [state.value]
  queryList()
  getActive()
}

const onClickVisit = async (row, val) => {
  if (val === 5) {
    selectedItem.value = row
    referralOpen.value = true
  } else {
    const res = await post('/outp/mzys/modifyPatientClinicStatus', {
      ghzt: val,
      jzbh: row.jzbh,
      ysbh: row.ysbh ? row.ysbh : ''
    })
    if (res.code !== 0) return message.error(res.msg)
    message.success(res.msg)
    queryList()
    getRegistereCount()
  }
}
const getActive = () => {
  actionArray.value = searchButton.value.filter((x) => x.state !== state.value)
  actionArray.value.push({ state: 5, title: '转诊' })
}

const handlerReferral = async (jzbh) => {
  const res = await post('/outp/mzys/getPatientReferral', { jzbh })
  if (res.code !== 0) return message.error(res.msg)
  referralData.value = res.data
}
onMounted(() => {
  getActive()
})
defineExpose({
  queryList
})
</script>

<style lang="less" scoped>
// .active-parent {
//   line-height: 34px;
//   border: 1px solid #d9d9d9;
// }
// .active-search {
//   border-right: 1px solid #d9d9d9;
// }
// .active-search:last-child {
//   border-right: 0;
// }
// .active-button {
//   color: #fff;
//   background-color: var(--primary-color);
// }
// .visit-state:hover {
//   color: #fff;
//   background-color: var(--primary-color);
// }
.radio-style {
  :deep(.ant-radio-button-wrapper) {
    width: 33.3%;
    padding: 0;
    text-align: center;
  }
}
</style>
